<!--任务受理-->
<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!--搜索区-->
    <el-row>
      <el-col>
        <div class="search-wrapper">
          <ul class="search-box">
            <li><span class="filter-name">任务类别：</span>
              <el-select v-model="listQuery.dutyTypeSearch" placeholder="请选择" clearable style="width:130px" class="filter-item">
                <el-option v-for="item in dutyTypeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
              </el-select></li>
            <li><span class="filter-name">状态：</span>
              <el-select v-model="listQuery.handleStateSearch"   placeholder="请选择" clearable style="width:150px" class="filter-item">
                <el-option v-for="item in dutyStateOptions" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"/>
              </el-select><br/></li>
            <li><span class="filter-name">发布时间：</span>
              <el-date-picker v-model="listQuery.createTimeSearch" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/></li>
            <br><li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch(value)">查询</el-button></li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <!--表格-->
    <el-row>
      <el-col>
        <div class="data-wrapper">
          <template v-if="tableData!=null">
            <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" label="序号" :index="indexMethod" width="50">
              </el-table-column>
              <el-table-column prop="dutyCode" label="任务编号" sortable :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyName"  label="任务名称" :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyType.name" label="任务类型" :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyNote" label="任务内容"  :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="eName" label="所属事件名称" :show-overflow-tooltip="true" width="110">
              </el-table-column>
              <el-table-column prop="eCode" label="所属事件编码" :show-overflow-tooltip="true" width="110">
              </el-table-column>
              <el-table-column prop="createUser" label="任务发布人" :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="createTime" label="任务发布时间" :show-overflow-tooltip="true" sortable width="130">
              </el-table-column>
              <!--<el-table-column prop="liableUser" label="任务负责人" :show-overflow-tooltip="true" width="120">-->
              <!--</el-table-column>-->
              <el-table-column prop="handleState" label="任务状态" :show-overflow-tooltip="true" :formatter="formatState">
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="120" >
                <template slot-scope="scope">
                  
                  <!--待受理的状态：受理或申请拒绝-->
                  <!--待受理状态：受理任务-->
                  <el-button title="受理" size="small"  type="primary"
                             @click="acceptduty( scope.row.dutyId,9)"
                             circle icon="el-icon-check"
                             v-if="scope.row.handleState == -1">
                  </el-button>
                  <!--待受理状态：申请拒绝任务。弹层：任务内容，拒绝理由，提交-->
                  <el-button title="申请拒绝" size="small"  type="success"
                             @click="openRefuse(scope.$index, scope.row)"
                             circle icon="el-icon-edit"
                             v-if="scope.row.handleState == -1">

                  </el-button>

                  <!--等待拒绝确认状态：处理拒绝申请。弹层：任务内容，拒绝理由，同意，拒绝-->
                  <el-button title="处理拒绝申请" size="small"  type="warning"
                             @click="openHandleRefuse(scope.$index, scope.row)"
                             circle icon="el-icon-message"
                             v-if="scope.row.handleState == 8">

                  </el-button>
                  <!--处理中状态：处理完成-->
                  <el-button title="处理完成" size="small"  type="warning"
                             @click="completeDuty(scope.row.dutyId,5)"
                             circle icon="el-icon-star-off"
                             v-if="scope.row.handleState == 9 || scope.row.handleState == 6">

                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!--底部区域-->
    <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
      <!-- 批量导入 -->
      <!--<el-col :span="4">-->
      <!--<div class="grid-content">-->
      <!--<el-button type="primary">批量导出</el-button>-->
      <!--</div>-->
      <!--</el-col>-->
      <!-- 分页 -->
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>
    <!-- 弹出窗口区域 -->
    <el-dialog title=" " :visible.sync="dialogFormVisible">
      <el-form :model="form" >
        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="任务内容" :label-width="formLabelWidth" >
              <el-input  type="textarea"  v-model="form.dutyNote" v-bind:readonly="readonly" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="申请说明" :label-width="formLabelWidth">
              <el-input  type="textarea"  v-model="form.handleResult"  v-bind:readonly="readonly">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="success" @click="submitRefuse(8)" v-if="!readonly">提交申请</el-button>
        <el-button size="medium" type="success" @click="agreeRequest(0)" v-if="readonly">同意申请</el-button>
        <el-button size="medium" type="warning" @click="refuseRequest(-1)" v-if="readonly">拒绝申请</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                //时间下拉字典
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //下拉类型options
                dutyTypeOptions: [],
                dutyStateOptions: [{
                    dictValue: -1,
                    dictName: '待受理'
                }, {
                    dictValue: 8,
                    dictName: '待确认拒绝'
                }, {
                    dictValue: 9,
                    dictName: '处理中'
                }, {
                    dictValue: 5,
                    dictName: '处理完成'
                },
                    {
                        dictValue: 6,
                        dictName: '已驳回'
                    }, {
                        dictValue: 0,
                        dictName: '任务完成'
                    }],
                //表格全局参数
                tableData: null,
                //默认数据总数
                dataCount: 100,
                pageSizes: [5, 10, 20, 30, 40],
                //批量选中参数
                //多选的值
                listSelect: [],
                //分页参数
                //搜索框参数
                searchInput: "",
                //搜索参数
                //搜索。axios发送的参数
                listQuery: {
                    currentPage: 1,
                    pageSize: 10,

                },
                //弹框的数据是否可编辑
                readonly: true,
                value: "", //
                //页面加载
                loading: false,

                //弹层显示开关
                dialogFormVisible: false,
                //弹层表单数据
                form: {},
                //弹层宽度
                formLabelWidth: "100px",

                // 下拉选项
                options: [
                    {
                        value: "Leanne Graham",
                        label: "Leanne Graham"
                    }
                ],
                //类型下拉选项字典
                typeDir: [
                    {
                        value: "类1",
                        key: "1"
                    },
                    {
                        value: "类2",
                        key: "2"
                    }
                ],
                //状态字典
                stateDir:[
                    {
                        handleState:-1,
                        value:'待处理'
                    },
                    {
                        handleState:8,
                        value:'申请拒绝'
                    },
                    {
                        handleState:9,
                        value:'处理中'
                    },
                    {
                        handleState:5,
                        value:'处理完成'
                    },
                    {
                        handleState:0,
                        value:'处理完成'
                    }

                ]
            };
        },
        mounted() {
            // 初始化页面
            this.postList();
            //获取任务类型下拉
            this.getTypeOptions();
        },

        updated() {},
        destroyed() {},
        methods: {
            // 状态翻译
            formatState: function(row, column) {
                if(row.handleState==-1){
                    return '待受理';
                }else if(row.handleState==8){
                    return '等待拒绝确认'
                }else if(row.handleState==9){
                    return  '处理中'
                }else if(row.handleState==6){
                    return  '已驳回/需再次处理'
                } else if(row.handleState==5){
                    return  '任务结果待审核'
                }else if(row.handleState==0){
                    return  '任务已完成/关闭'
                }else{
                    return  '其他'
                }
            },

            //获取任务类型下拉
            getTypeOptions(){
                //获取任务类型
                this.getDictionary({types:["DUTY_TYPE"]}).then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.dutyTypeOptions = data.data["DUTY_TYPE"];
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            },

            //列表查询
            postList() {
                this.loading = true;
                this.postRequest("/api/rcs/acceptDutys", this.listQuery)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;
                    this.dataCount = data.count;
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },
            //搜索功能
            handSearch() {
                console.log(this.listQuery)
                this.postList();
            },
            //处理列表序号
            indexMethod(index) {
                return (
                    index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                );
            },
            //受理任务
            acceptduty(dutyId,state) {
                this.form={};
                this.form.dutyId=dutyId;
                this.form.handleState=state;
                this.editduty();
            },
            //申请拒绝弹层
            openRefuse(index,row){
                this.readonly = false;
                this.form = row;//给表单赋值当前行数据
                this.dialogFormVisible = true;
            },
            //提交拒绝申请
            submitRefuse(state){
                this.form.handleState=state;
                this.editduty();
            },
            //打开处理拒绝申请弹层
            openHandleRefuse(index,row){
                this.readonly = true;
                this.form = row;//给表单赋值当前行数据
                this.dialogFormVisible = true;
            },

            //同意申请,关闭任务
            agreeRequest(val){

                this.form.handleResult=this.form.handleResult+'    系统：已同意拒绝申请';//同意拒绝申请
                this.postRequest("/api/rcs/completeDuty", this.form)
                    .then(res => {
                    this.loading = true;
                var data = res.data;
                if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.dialogFormVisible = false;
                    this.postList();
                    this.form = {};
                } else {
                    this.$message.error(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });

            },
            //拒绝申请
            refuseRequest(state){
                this.form.handleState=state;
                this.editduty();
            },
            //完成任务
            completeDuty(dutyId,state){
                this.form={};
                this.form.dutyId=dutyId;
                this.form.handleState=state;
                this.editduty();//要修改
            },
            //修改状态，和处理结果
            editduty(){
                this.$confirm("确认操作？").then(_ => {
                    console.log('跨域提交的form'+this.form)
                this.postRequest("/api/rcs/editDuty", this.form)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.dialogFormVisible = false;
                    this.postList();
                    this.form = {};
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            });
            },


            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.postList();
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage = currentPage;
                this.postList();
            }
        }
    };
</script>



